<template>
	<view>
		<view class="info-box">
			<view class="group_item">
				<view class="group_title">
					<span style="color: red;">*</span>真实姓名
				</view>
				<input type="text" v-model="userName" placeholder="请输入真实姓名" class="picker_class" maxlength="100" />
			</view>
			<view class="group_item">
				<view class="group_title">
					<span style="color: red;">*</span>联系方式
				</view>
				<input type="text" v-model="userPhone" placeholder="请输入联系方式" class="picker_class" maxlength="100" />
			</view>
			<view class="group_item">
				<view class="group_title">
					<span style="color: red;">*</span>城市/区域
				</view>
				<uni-data-picker :localdata="areaInfoList" @change="areaChange" v-model="areaModel" class="picker_class">
					<view>{{areaInfo || "请选择地址"}}</view>
				</uni-data-picker>
			</view>
			<view class="group_last">
				<view class="group_title">
					<span style="color: red;">*</span>详细地址
				</view>
				<textarea maxlength="300" v-model="addressInfo" placeholder="请输入详细地址" class="picker_content_class" />
				</view>
		</view>
		<button type="primary" class="button_class" @click="addExpressAdress()">添加</button>
	</view>
</template>

<script>
	import {
		areaData
	} from '@/config/areaData.js'
	import uniDataPicker from '@/components/uni-data-picker/uni-data-picker.vue'
	export default {
		data() {
			return {
				areaInfoList: "",
				areaInfo: "",
				areaModel: [],
				userName: "",
				addressInfo:"",
				userPhone: "",
				userId:uni.getStorageSync("userInfo").userUuid,
				addressType:""
			}
		},
		onLoad(options) {
			this.areaInfoList = areaData;
			if (options && options.addressType) {
				this.addressType = options.addressType
			}
		},
		methods: {
			areaChange(e) {
				let areaList = e.detail.value;
				this.areaModel = e.detail.value
				this.areaInfo = "";
				for (let i = 0; i < areaList.length; i++) {
					if (i == areaList.length - 1) {
						this.areaInfo = this.areaInfo + areaList[i].text
					} else {
						this.areaInfo = this.areaInfo + areaList[i].text + "/"
					}
				}

			},
			addExpressAdress(){
				if(!this.userName){
					this.$api.msg("请输入真实姓名")
				}else if(!this.userPhone){
					this.$api.msg("请输入联系方式")
				}else if(!this.areaInfo){
					this.$api.msg("请选择地址")
				}else if(!this.addressInfo){
					this.$api.msg("请输入详细地址")
				}else{
					let params = {
						requestType:"ADD",
						userId:this.userId,
						realName:this.userName,
						userPhone: this.userPhone,
						province:this.areaModel[0].text,
						city:this.areaModel[1].text,
						county:this.areaModel[2].text,
						address:this.addressInfo,
						addressType:this.addressType
					}
					this.$api.request.managerExpressAddress(params,(res)=>{
						if(res.code == 200){
							this.$api.msg("添加成功")
							uni.navigateBack()
						}
					})
				}
			}
		},
		components: {
			uniDataPicker
		}
	}
</script>

<style scoped>
	page {
		background-color: #FBFBFB;
	}

	.group_item {
		width: 100%;
		display: flex;
		background: red;
		flex-direction: row;
		background-color: white;
		justify-content: space-between;
		border-bottom: 1px solid #edf0f9;
	}

	.group_last {
		width: 100%;
		display: flex;
		background: red;
		flex-direction: row;
		background-color: white;
		justify-content: space-between;
	}

	.group_title {
		/* width: 100upx; */
		height: 100upx;
		line-height: 100upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		width: 70%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 10upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	.info-box {
		padding: 20upx;
		margin: 20upx;
		border-radius: 20upx;
		background-color: #FFF;
	}
	
	.picker_content_class {
		width: 70%;
		height: 200upx;
		margin-top: 30upx;
		margin-left: 30upx;
		font-size: 28upx;
	}
	
	.button_class {
		position: fixed;
		bottom: 40upx;
		width: 80%;
		margin-left: 10%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background: #1DA3EE !important;
		color: white;
	}
</style>
